<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>SSO Login</title>
<link rel="stylesheet" href="/sso/static/css/lib/material.min.css" />
<link rel="stylesheet" href="/sso/static/css/index.css" />
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.deep_orange-red.min.css" />
</head>

<body>

    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <div class="mypig-header mdl-layout__header mdl-layout__header--waterfall">
            <div class="mdl-layout__header-row">
                <span class="mypig-title mdl-layout-title">
                    <img class="mypig-logo-image-" />
                </span>
                <!-- Add spacer, to align navigation to the right in desktop -->
                <div class="mypig-header-spacer mdl-layout-spacer"></div>
                <div class="mypig-search-box mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right mdl-textfield--full-width">
                    <label class="mdl-button mdl-js-button mdl-button--icon" for="search-field">
                        <i class="material-icons">search</i>
                    </label>
                    <div class="mdl-textfield__expandable-holder">
                        <input class="mdl-textfield__input" type="text" id="search-field"/>
                    </div>
                </div>
                <!-- Navigation -->
                <div class="mypig-navigation-container">
                    <nav class="mypig-navigation mdl-navigation">
                        <a class="mdl-navigation__link mdl-typography--text-uppercase" href="">MyPig</a>
                    </nav>
                </div>
                <span class="mypig-mobile-title mdl-layout-title">
                    <img class="mypig-logo-image-" alt="MyPig"/>
                </span>
                <button class="mypig-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" id="more-button">
                    <i class="material-icons">more_vert</i>
                </button>
                <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="more-button">
                    <li class="mdl-menu__item">1</li>
                    <li class="mdl-menu__item">2</li>
                    <li class="mdl-menu__item" disabled="true">3</li>
                    <li class="mdl-menu__item">4</li>
                </ul>
            </div>
        </div>

        <div class="mypig-drawer mdl-layout__drawer">
            <span class="mdl-layout-title">
                <img class="mypig-logo-image-" src=""/>
            </span>
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="">My</a>
                <div class="mypig-drawer-separator"></div>
            </nav>
        </div>

        <div class="mypig-content mdl-layout__content">
            <div class="mypig-be-together-section mdl-typography--text-center">


                <div>
                    <h5>Login</h5>
                    <p th:if="${param.error}">
                        <div class="mdl-components__warning"><b>Note: </b>Login failed ...</div>
                    </p>
                    <p th:if="${param.logout}">
                        <div class="mdl-components__warning"><b>Note: </b>Login succeeded.</div>
                    </p>
                    <form method="post" th:action="@{/login}">
                        <div>
                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                <input class="mdl-textfield__input" type="text" id="username" name="username" value="forsrc@gmail.com" />
                                <label class="mdl-textfield__label" for="username">Username</label>
                            </div>
                        </div>
                        <div>
                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                <input class="mdl-textfield__input" type="password" id="password" name="password" value="forsrc" />
                                <label class="mdl-textfield__label" for="password">Password</label>
                            </div>
                        </div>
                        <div>
                            <button class="mdl-button mdl-js-button mdl-button--primary">
                                Login
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>



    </div>


</body>
<script type="text/javascript" src="/sso/static/js/lib/material.min.js"></script>
</html>